<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {

            width: 500px;
            height: 220px;
            background-color: #00a1cc;
            overflow-x: hidden;
            overflow-y: hidden;
            white-space: nowrap;
            position: relative;
        }
        #box img {
            font-size: 0;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="box2" style="float: left">
        <img src="image/1.jpg" height="220">
        <img src="image/2.png" height="220">
        <img src="image/3.jpg" height="220">
        <img src="image/4.jpg" height="220">
        <img src="image/5.jpg" height="220">

        <img src="image/1.jpg" height="220">
        <img src="image/2.png" height="220">
        <img src="image/3.jpg" height="220">
        <img src="image/4.jpg" height="220">
        <img src="image/5.jpg" height="220">
    </div>

</div>

<script>
    var box = document.getElementById('box');
    var box2 = document.getElementById('box2');
    console.log(box.offsetWidth);
    console.log(box.clientWidth);
    console.log(box.scrollWidth);
    console.log("**************************");

//    box.onscroll = function(){
//        //this === box
//        console.log(this.scrollLeft);
//        console.log('offsetWidth'+box.offsetWidth);
//        console.log(box2.offsetLeft);
//
//    }
   function move(){
       if (box.scrollLeft >= box.scrollWidth/2){
           box.scrollLeft = 0;
       } else {
           box.scrollLeft =  box.scrollLeft + 1;
       }
   }
   setInterval(move,5);

</script>
</body>
</html>